import { Component, OnInit, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-time2',
    template: `
        <div class="time text">
            <div class="top block">2</div>
            <div class="flod-box ">
                <div class="front flod-block">1</div>
                <div class="back flod-block">2</div>
            </div>
            <div class="bottom block">1</div>
        </div>
  `,
    styles: [
        `
            .time {
                position: relative;
                height: 100px;
                box-sizing: border-box;
            }

            .text {
                font-size: 100px;
                color: #FFFFFF;
                text-align: center;
                line-height: 200px;
            }

            .time .top {
                position: relative;
            }

            .time .bottom {
                line-height: 0; /* 把数字头顶到上面去 */
            }

            .block {
                width: 150px;
                height: 100px;
                background-color: black;
                overflow: hidden;
            }

            .time .flod-box {
                position: absolute;
                top: 0; /* 为了把flod-box 放到top表面上 */
                width: 150px;
                height: 100px;
                transform-style: preserve-3d;
                transform-origin: bottom; /* 以底部为旋转的基准点 */
                transition: all 1s;
            }

            .flod-box .flod-block {
                position: absolute;
                width: 100%;
                height: 100%;
                backface-visibility: hidden;
                overflow: hidden;
            }

            .flod-box .front {
                background-color: rgb(3, 0, 0);
            }

            .flod-box .back {
                background-color: #020202;
                transform: rotateX(0deg) rotateY(-180deg) scale(-1);
                line-height: 0px; /* 把数字上移了*/
            }

            .flod-box:hover {
                transform: perspective(200px) rotateX(-180deg);
            }
        `
    ],
    encapsulation: ViewEncapsulation.None
})
export class Time2Component implements OnInit{
    time: string;
    date: string;
    week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

    ngOnInit(): void {
        setInterval(() => {
            this.updateTime();
        }, 1000);
    }


updateTime() {
    const cd = new Date();
    this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);
    this.date = this.zeroPadding(cd.getFullYear(), 4) + '-' + this.zeroPadding(cd.getMonth() + 1, 2) + '-' + this.zeroPadding(cd.getDate(), 2) + ' ' + this.week[cd.getDay()];
    };

     zeroPadding(num, digit) {
        let zero = '';
        for (let i = 0; i < digit; i++) {
            zero += '0';
        }
        return (zero + num).slice(-digit);
    }

}
